<template>
  <el-dialog :title="title" :visible="visible" @close="closeDialog">
    <detail-table :columns="columns" :detail="detail" :label-width="150">
      <div slot="teachAssess" slot-scope="scope" style="margin-bottom: 20px">
        <pdf-enter :src="scope.row.teachAssess[0]" words="点击查看教学评估表" style="color: #409eff;" />
      </div>
      <div slot="teachPlan" slot-scope="scope" style="margin-bottom: 20px">
        <pdf-enter :src="scope.row.teachPlan[0]" words="点击查看送教教学计划" style="color: #409eff;" />
      </div>
      <div slot="teachSummary" slot-scope="scope" style="margin-bottom: 20px">
        <pdf-enter :src="scope.row.teachSummary[0]" words="点击查看送教总结" style="color: #409eff;" />
      </div>
      <div
        slot="publicityArticle"
        slot-scope="scope"
        style="margin-bottom: 20px"
      >
        <pdf-enter :src="scope.row.publicityArticle" words="点击打开美篇链接" style="color: #409eff;" />
      </div>
      <div slot="teachBookA" slot-scope="scope" style="margin-bottom: 20px">
        <el-image
          v-for="(url, index) in scope.row.teachBookA"
          :key="index"
          :src="url"
          :fit="fit"
          lazy
          :preview-src-list="scope.row.teachBookA"
          style="width: 100px; height: 100px; margin-right: 10px"
        >
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline" />
          </div>
        </el-image>
      </div>
      <div slot="workSceneA" slot-scope="scope">
        <el-image
          v-for="(url, index) in scope.row.workSceneA"
          :key="index"
          :src="url"
          :fit="fit"
          lazy
          :preview-src-list="scope.row.workSceneA"
          style="width: 100px; height: 100px; margin-right: 10px"
        >
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline" />
          </div>
        </el-image>
      </div>
      <div slot="teachBookB" slot-scope="scope" style="margin-bottom: 20px">
        <el-image
          v-for="(url, index) in scope.row.teachBookB"
          :key="index"
          :src="url"
          :fit="fit"
          lazy
          :preview-src-list="scope.row.teachBookB"
          style="width: 100px; height: 100px; margin-right: 10px"
        >
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline" />
          </div>
        </el-image>
      </div>
      <div slot="workSceneB" slot-scope="scope">
        <el-image
          v-for="(url, index) in scope.row.workSceneB"
          :key="index"
          :src="url"
          :fit="fit"
          lazy
          :preview-src-list="scope.row.workSceneB"
          style="width: 100px; height: 100px; margin-right: 10px"
        >
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline" />
          </div>
        </el-image>
      </div>
    </detail-table>
    <span v-if="isVerify" slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="doVerify">审核通过</el-button>
    </span>
  </el-dialog>
</template>

<script>
import PdfEnter from '@/components/pdf-enter'
import DetailTable from '@/components/detail-table/index'
import { getLabelByValue } from '@/utils/index'
import { recordTypeOptions } from '../../attr'
export default {
  name: 'SendRecordDialog',
  components: { DetailTable, PdfEnter },
  props: {
    detail: {
      type: Object,
      default: null
    },
    isVerify: {
      type: Boolean,
      default: false
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fit: 'fill',
      columns: [
        {
          title: '送教老师',
          dataIndex: 'teacherName',
          key: 'teacherName',
          isHidden: (row) => !row.teacherName
        },
        {
          title: '送教学生',
          dataIndex: 'studentName',
          key: 'studentName',
          isHidden: (row) => !row.studentName
        },
        {
          title: '所属学期',
          dataIndex: 'schoolTermName',
          key: 'schoolTermName',
          isHidden: (row) => !row.schoolTermName
        },
        {
          title: '送教类型',
          dataIndex: 'type',
          key: 'type',
          render: (val) => getLabelByValue(val, recordTypeOptions)
        },
        {
          title: '送教教学计划',
          dataIndex: 'teachPlan',
          key: 'teachPlan',
          isHidden: (row) => ![1].includes(row.type),
          hasSlot: true
        },
        {
          title: '送教总结',
          dataIndex: 'teachSummary',
          key: 'teachSummary',
          isHidden: (row) => ![4].includes(row.type),
          hasSlot: true
        },
        {
          title: '期末评价',
          dataIndex: 'endTermAssess',
          key: 'endTermAssess',
          isHidden: (row) => ![5].includes(row.type),
          hasSlot: true
        },
        {
          title: '美篇链接',
          dataIndex: 'publicityArticle',
          key: 'publicityArticle',
          isHidden: (row) => ![3].includes(row.type),
          hasSlot: true
        },
        {
          title: '送教时间',
          dataIndex: 'outTime',
          key: 'outTime',
          isHidden: (row) => ![2].includes(row.type)
        },
        {
          title: '送教地点',
          dataIndex: 'outAddress',
          key: 'outAddress',
          isHidden: (row) => ![2].includes(row.type)
        },
        {
          title: '送教教案（课时1）',
          dataIndex: 'teachBookA',
          key: 'teachBookA',
          isHidden: (row) => ![2].includes(row.type),
          hasSlot: true
        },
        {
          title: '送教现场（课时1）',
          dataIndex: 'workSceneA',
          key: 'workSceneA',
          isHidden: (row) => ![2].includes(row.type),
          hasSlot: true
        },
        {
          title: '送教教案（课时2）',
          dataIndex: 'teachBookB',
          key: 'teachBookB',
          isHidden: (row) => ![2].includes(row.type),
          hasSlot: true
        },
        {
          title: '送教现场（课时2）',
          dataIndex: 'workSceneB',
          key: 'workSceneB',
          isHidden: (row) => ![2].includes(row.type),
          hasSlot: true
        }
      ]
    }
  },
  computed: {
    title() {
      return `送教提报`
    }
  },
  methods: {
    closeDialog() {
      this.$emit('transferData', 'close')
    },
    doVerify() {
      this.$emit('transferData', 'verify')
    }
  }
}
</script>

<style lang="less" scoped>
</style>
